<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no, email=no">
    <title>Payment details</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .show span {
            border: 1px solid #CCCCCC;
            border-radius: 22px;
            width: 22px;
            height: 22px;
            float: right;
            margin-top: 20px;
            margin-right: 20px;
            box-sizing: border-box;
        }

        .show input[type="radio"]:checked+span {
            border: none;
            ;
            background: url() no-repeat;
            background-size: 100%;
        }

        .confit {
            width: 90%;
            height: 45px;
            line-height: 45px;
            border-radius: 5px;
            background-color: #303030;
            color: #fff;
            text-align: center;
            margin: 100px auto;
        }
    </style>
</head>

<body style="background: #f5f5f5;height:100vh" id="body1">
    <div id="head1"
        style="position: relative;text-align: center;line-height: 45px;background-color: #303030;color: #FFF;">
        <img src=""
            alt="" style="position: absolute ; left: 10px;top:10px;width: 24px;" onclick="window.history.back(-1)">
        Payment details
    </div>
    <p style="text-align: center;padding:30px 0">
        AU$<strong id="showPrice"></strong>
    </p>
    <div class="pay">
        <div class="show">
            <li onclick="changeAction(2)"
                style="width: 100%;height: 60px; line-height: 60px;  list-style: none;  background: #fff;  border-bottom: 1px solid #eee;">
                <label style="width: 100%;  height: 60px;  display: inline-block;">
                    <img style="margin-left: 10px;border: 0;width: 40px;vertical-align: middle;margin-right: 10px;"
                        src="">
                    Paypal<input style="display: none;" name="Fruit" type="radio" value="" checked="">
                    <span style="">
                    </span>
                </label>
            </li>
            <li onclick="changeAction(1)"
                style="width: 100%;height: 60px;line-height: 60px;list-style: none;background: #fff;border-bottom: 1px solid #eee;">
                <label style="width: 100%; height: 60px;  display: inline-block;">
                    <img style=" width: 26px;  height: 26px;  margin-left: 20px; border: 0;vertical-align: middle;margin-right: 15px;"
                        src="">
                    Square
                    <input name="Fruit" type="radio" value="" style="display: none;"><span style=""></span>
                </label>
            </li>
        </div>
    </div>
    <p class="confit" onclick="sublit()">Confirm</p>
    <form id="formID" method="POST" action="https://www.empirise.com/mall/public/index.php/web/paypal/get_code">
        <input name="users_id" id="userId" type="hidden" />
        <input name="total_order_id" id="total_order_id" type="hidden" />
        <input name="pay_price" id="amount" type="hidden" />
        <input name="return_url" id="return_url" type="hidden" />

    </form>
    <script>

        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
        }
        var userId = GetQueryString("userId");
        var total_order_id = GetQueryString("id");
        var amount = GetQueryString("amount");
        var activity = GetQueryString("activity");
        var isWeb = GetQueryString("isWeb") || "web";

        if (userId) {
            document.getElementById("userId").value = userId;
            document.getElementById("amount").value = amount;
            document.getElementById("showPrice").innerHTML = amount;
            document.getElementById("total_order_id").value = total_order_id;
            document.getElementById("return_url").value = "https://www.empirise.com/mall/public/web/payresult.html?id=" + total_order_id + 'isWeb=' + isWeb;
        }
        if (isWeb == "app") {
            var box = document.getElementById("body1");  //找到父元素
            var p1 = document.getElementById("head1");    //找到子元素    
            box.removeChild(p1);
        }
        function changeAction(type) {
            let url = 'https://www.empirise.com/mall/public/index.php/web/paypal/get_code';
            if (activity) {
                url = "https://www.empirise.com/index.php/web/activity_paypal/get_code";
            }

            if (type == 1) {
                url = 'https://www.empirise.com/mall/public/php_payment/index.php'
                if (activity) {
                    url = "https://www.empirise.com/php_payment/index_act.php";
                }
            }

            document.getElementById("formID").action = url;
        }
        function sublit() {
            document.getElementById("formID").submit()
        }
        changeAction()
    </script>

</body>

</html>